import React, { useRef, useState, useEffect } from 'react';
import { connect } from 'umi';
import { Radio, Row, Col, Card, Space } from 'antd';
import TableDataBlock from '@/components/TableDataBlock';
import PopImgShow from '@/components/PopImgShow';
import { useUpdateEffect } from 'ahooks';
import Form from './components/Form'
const BannerList = (props) => {
    const { loading, dispatch, history, departmentList, teamList } =
        props;
    const { location } = history;
    const { query } = location;
    const { accessId } = query
    const childRef = useRef();
    const [visible, setVisible] = useState(false);
    const [active, setActive] = useState('home')
    const [list, setList] = useState([])
    const [wxPageList, setWxPageList] = useState([])

    const handleCallback = () => {
        dispatch({
            type: 'marketing/fetchListBanner',
            payload: {
                page: 1,
                limit: 100,
                bannerType: active
            },
            callback: (e) => {
                const { bannerList = [] } = e
                setList(bannerList)
            }
        })
    };
    useEffect(() => {
        dispatch({
            type: 'selectionWindow/fetchPageConfig',
            payload: {
                page: 1,
                limit: 100,
                pageType: "normal"
            },
            callback: (e) => {
                setWxPageList(e)
            }
        })
    }, [])
    useUpdateEffect(() => {
        handleCallback()
    }, [active])
    const onChange = (e) => {
        setActive(e.target.value);
    };
    const btnExtra = [{
        text: '设置banner',
        onClick: () => {
            setVisible({
                show: true,
                detail: list
            })
        }
    }]

    const getColumns = [
        {
            title: '封面',
            dataIndex: 'cover',
        },
        {
            title: '权重',
            dataIndex: 'weight',
        },
        {
            title: '状态',
            dataIndex: 'status',
            render: (e) => {
                return {
                    0: '下架',
                    1: '上架'
                }[e]
            }
        },
    ];
    const TabList = [
        {
            label: '首页',
            key: 'home',
        },
        {
            label: '首页引导弹窗',
            key: 'drawer',
        },
    ]
    return (
        <Card title='banner配置'>
            <Row gutter={[0, 12]}>
                <Col span={24}>
                    <Radio.Group
                        value={active}
                        onChange={onChange}
                        style={{
                            marginBottom: 16,
                        }}
                    >
                        {TabList.map((item, index) => {
                            return <Radio.Button key={index} value={item.key}>{item.label}</Radio.Button>
                        })}
                    </Radio.Group>
                </Col>
                <Col span={24}>
                    <TableDataBlock
                        btnExtra={btnExtra}
                        params={{ status: active }}
                        loading={loading}
                        columns={getColumns}
                        list={list}
                        pagination={false}
                        rowKey={(record) => `${record.id}`}
                    ></TableDataBlock>
                </Col>

            </Row>
            <Form active={active} wxPageList={wxPageList} handleCallback={handleCallback} visible={visible} onClose={() => { setVisible(false) }}></Form>
        </Card>


    );
};

export default connect(({ loading }) => ({
    loading: loading.models.order,
}))(BannerList);